<template>
	<view class="bg">
		<xl-navbar title="选择器" fixed shadow></xl-navbar>
		<xl-list-item title="基本使用">
			<template #right>
				<view class="picker-box">
					<xl-picker
						:options="provinceOptions"
						valueName="name"
						:show-choose="true"
						:showLastLabel="false"
						choosePadding="0"
						fontSize="30rpx"
						placeholder="请选择省份"
						@change="regionChange"
					></xl-picker>
				</view>
			</template>
		</xl-list-item>
		<xl-list-item title="多级联动">
			<template #right>
				<view class="picker-box">
					<xl-picker
						:options="regionOptions" 
						activeColor="#0081ff"
						valueName="name" 
						:show-choose="true" 
						:showLastLabel="false" 
						choosePadding="0"
						fontSize="30rpx" 
						placeholder="请选择地区" 
						@change="regionChange"
					></xl-picker>
				</view>
			</template>
		</xl-list-item>
    <xl-list-item title="带标题">
      <template #right>
        <view class="picker-box">
          <xl-picker
              title="请选择省份"
              :options="provinceOptions"
              valueName="name"
              :show-choose="true"
              :showLastLabel="false"
              choosePadding="0"
              fontSize="30rpx"
              placeholder="请选择省份"
              @change="regionChange"
          ></xl-picker>
        </view>
      </template>
    </xl-list-item>
		<xl-list-item title="默认选中">
			<template #right>
				<view class="picker-box">
					<xl-picker
						:defaultValue="defaultValue"
						:options="regionOptions" 
						valueName="name" 
						:show-choose="true" 
						:showLastLabel="false" 
						choosePadding="0"
						fontSize="30rpx" 
						placeholder="请选择地区" 
						@change="regionChange"
					></xl-picker>
				</view>
			</template>
		</xl-list-item>
		<xl-list-item title="中部弹窗">
			<template #right>
				<view class="picker-box">
					<xl-picker
						:options="monthOptions" 
						valueName="value"
						:defaultValue="monthDefaultValue"
						:show-choose="true" 
						:showLastLabel="false" 
						choosePadding="0"
						fontSize="30rpx" 
						:itemHeight="52"
						title="选择月份"
						placeholder="请选择年月" 
						:cascader="false"
						centerPopup
						@change="regionChange"
					></xl-picker>
				</view>
			</template>
		</xl-list-item>
		<xl-list-item title="按钮触发">
			<template #right>
				<view class="picker-box">
					<view style="font-size: 30rpx;" @click="showPicker = true">点击打开picker</view>
					<xl-picker
						:defaultValue="defaultValue"
						v-model="showPicker"
						:options="regionOptions" 
						valueName="name" 
						:show-choose="false" 
						choosePadding="0"
						fontSize="30rpx" 
						@change="regionChange"
					></xl-picker>
				</view>
			</template>
		</xl-list-item>
		<xl-list-item title="非级联">
			<template #right>
				<view class="picker-box">
					<xl-picker
						:options="monthOptions" 
						valueName="value"
						:defaultValue="monthDefaultValue"
						:show-choose="true" 
						:showLastLabel="false" 
						choosePadding="0"
						fontSize="30rpx" 
						placeholder="请选择年月" 
						:cascader="false"
						@change="regionChange"
					></xl-picker>
				</view>
			</template>
		</xl-list-item>
	</view>
</template>

<script setup>
	import regionOptions from '@/uni_modules/xingluo-ui/libs/utils/citys.js'
	import { ref, onMounted, computed } from 'vue'
	
	const provinceOptions = ref(regionOptions.map(v => v.name))
	
	const defaultValue = ref(['福建', '福州', '仓山区'])

	function regionChange(value, label) {
		console.log(value, label);
	}
	
	const showPicker = ref(false)
	
	const monthOptions = ref([[], []])
	const currentYear = new Date().getFullYear();
	monthOptions.value[0] = Array.from({ length: 30 }, (_, i) => ({ name: `${currentYear - i}年`, value: currentYear - i })).reverse();
	monthOptions.value[1] = Array.from({ length: 12 }, (_, i) => ({ name: `${i + 1}月`, value: i + 1 }));
	
	const monthDefaultValue = ref([monthOptions.value[0][monthOptions.value[0].length - 1].value, monthOptions.value[1][0].value])
	
	setTimeout(() => {
		defaultValue.value = ['河北', '唐山', '开平区']
		// monthDefaultValue.value = [monthOptions.value[0][4].value, monthOptions.value[1][6].value]
	}, 2000)
	
</script>

<style lang="scss" scoped>
	.title{
		height: 110rpx;
		line-height: 110rpx;
		padding: 0 30rpx;
		font-size: 32rpx;
		color: #888;
	}
	.picker-box {
		width: 400rpx;
	}
</style>